<template>
  <div>
    <el-card v-if="rtuPortDisplays.length > 0">
      <div slot="header" class="clearfix d-flex">
        <b>实时状态</b>
        <span class="text">
          状态更新时间：{{ currentDevice.states.datatime }}
        </span>
      </div>
      <div class="state-container">
        <template v-if="rtuPortDisplays.length <= 12">
          <dl v-for="(item, index) in rtuPortDisplays" :key="index">
            <dt :class="getClass(item)">
              {{ getState(item) }}
              <em>{{ item.unit }}</em>
            </dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </template>
        <template v-else>
          <dl
            v-for="(item, index) in rtuPortDisplays"
            :key="index"
            class="min-width"
          >
            <dt :class="getClass(item)">
              {{ getState(item) }}
              <em>{{ item.unit }}</em>
            </dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getDeviceState } from '@/utils/device'
  import { runDict, closeDict } from '@/utils/constant'
  export default {
    data() {
      return {
        rtuPortDisplays: [],
        states: {},
      }
    },
    computed: {
      ...mapGetters(['currentDevice']),
    },
    watch: {
      currentDevice: {
        handler(newVal) {
          this.rtuPortDisplays = newVal.rtuPortDisplays.filter((val) => {
            return +val.show_state > 0
          })
          this.states = newVal.states
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      getState(item) {
        return getDeviceState(this.states[item.namekey], item, this.states)
      },
      getClass(item) {
        if (runDict.includes(this.getState(item))) {
          return 'color-success'
        }
        if (closeDict.includes(this.getState(item))) {
          return 'color-danger'
        }
        return ''
      },
    },
  }
</script>

<style lang="scss" scoped>
  .text {
    margin-left: auto;
  }
  .state-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -20px;
    padding: 12px 0;
    dl {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-top: 32px;
      text-align: center;
      color: #666;
      &.min-width {
        width: calc(100% / 12);
        min-width: calc(100% / 12);
        max-width: calc(100% / 12);
      }
      dt {
        font-weight: bold;
        font-size: 16px;
        color: #333;
        &.color-success {
          color: #13ce66;
        }
        &.color-warning {
          color: #ffba00;
        }
        &.color-danger {
          color: #ff4949;
        }
        em {
          font-style: normal;
          font-size: 14px;
          padding-left: 4px;
        }
      }
      dd {
        &.iconfont {
          font-size: 18px;
          margin-top: 12px;
        }
        &.name {
          font-size: 12px;
          margin-top: 14px;
        }
      }
    }
  }
</style>
